<template>
	<hpy-form-select class="mypicker" :dataList="hobbyList" text="name" name="id" v-model="slval" hideBorder @change="change" :disabled="disabled"/>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import {getServiceStationList} from "@/api/index.js"
	export default defineComponent({
		components:{
			
		},
		props:{
			modelValue:'',
			disabled:{
				type:Boolean,
				default:false
			}
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				slval:'',
				hobbyList:[]
			})
			state.slval = props.modelValue
			onMounted(()=>{
				getServiceStationList({
					pageNumber:1,
					pageSize:100,
					state:1
				}).then(res =>{
					state.hobbyList = res.data.list
				})
			})
			
			const change = ()=>{
				//console.log("hobbySelect:",state.slval)
				const item = state.hobbyList.find(ele =>ele.id==state.slval)
				context.emit('update:modelValue',state.slval)
				context.emit('onchange',item)
			}
			
			return {
				...toRefs(state),
				change
			}
		}
	})
</script>

<style lang="scss" scoped>
	.mypicker{
		width: 100%;
		.placeholder{
			font-size: 30rpx;
		}
		.select-picker-arrow{
			font-size: 30rpx;
		}
	}
</style>
